<template>
  <div>
    <div class="container-body w">
      <Row :gutter="16">
        <div>
          <Col span="24">
            <Card style="border-radius:0;border:none;">
              <div class="recruittop">
                <h3 class="comname">{{companyinfo.comname}}</h3>
                <div class="minfo">
                  {{dbase.compnayindustry[companyinfo.compnayindustryindex]}}
                  <span class="vline"></span>
                  {{dbase.companykind[companyinfo.comkindindex]}}
                  <span class="vline"></span>
                  {{dbase.compnayscale[companyinfo.compnayscaleindex]}}
                </div>
                <div class="comtel">
                  <!-- 公司电话 -->
                  <!-- <div class="tel">拨打电话:{{companyinfo.tel}}</div> -->
                </div>
              </div>
            </Card>
          </Col>
        </div>
      </Row>
    </div>
    <div class="container-body w" style="background: #f1f1f1;">
      <Row type="flex" justify="space-between" class="code-row-bg">
        <Col span="17" style="background: #fff;">
          <Card style="border-radius:0;border:none;">
            <div class="rdetail">
              <div class="comdes">
                <h3 class="title">公司介绍</h3>
                <span class="grayline"></span>
                <div class="des">{{companyinfo.des}}</div>
              </div>
              <div class="comdes">
                <h3 class="title">公司地址</h3>
                <span class="grayline"></span>
                <div class="des">{{companyinfo.adress}}</div>
              </div>
              <div class="comimgs" v-if="companyinfo.imgs">
                <h3 class="title">公司环境</h3>
                <span class="grayline"></span>
                <div class="comimgitem">
                  <img v-for="(item,index) in companyinfo.imgs" :key="index" :src="item" alt>
                </div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span="6" style="background: #fff;min-height:0;">
          <Card style="border-radius:0;border:none;">
            <div class="rdetail" style="text-align:center">
              <h3 class="title">在招职位</h3>
              <span class="grayline"></span>
              <template v-if="zpinfo.length > 0">
                <div
                  class="onrecruit"
                  v-for="(item,index) in companyinfo.zpinfo"
                  :key="item.id"
                  @click="toRecruitdetail(item.id)"
                >
                  <div class="onrecruit-title">{{item.title}}</div>
                  <div class="onrecruit-salary">
                    <span class="salary">{{dbase.jobsalaries[item.salaryindex]}}</span>
                    <span>{{dbase.compnayindustry[item.compnayindustryindex]}}</span>
                  </div>
                  <div class="wel">
                    <span>{{dbase.degrees[item.degreesindex]}}</span>
                    <span>{{dbase.experiences[item.experiencesindex]}}</span>
                  </div>
                </div>
              </template>
              <div v-else class="onrecruit">暂无在招职位</div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      companyinfo: {},
      dbase: [],
      zpinfo:[],
    };
  },
  created() {
    console.log(this.$route.query.cid);
    var that = this,
      cid = that.$route.query.cid;
    console.log(cid);
    that.$http.aget("companyinfo", { cid: cid }).then(res => {
      console.log(res);
      that.companyinfo = res;
      that.zpinfo = res.zpinfo;
    });

    that.$axios.get(that.$http.apiurl("mpinfo")).then(res => {
      that.dbase = res.data.dbase;
    });
  },
  methods: {
    toRecruitdetail(e) {
      this.$router.push({ name: "recruitdetail", query: { zid: e } });
    }
  }
};
</script>
<style lang="scss">
body {
  background-color: #f1f1f1;

  .container-body {
    background-color: #fff;
    margin: 30px auto;
    padding-bottom: 0;
  }

  .recruittop {
    text-align: left !important;

    .comname {
      font-size: 24px;
    }

    .minfo {
      color: #999;
      font-size: 15px;
      line-height: 28px;
      margin-top: 10px;

      .salary {
        font-size: 20px;
        font-weight: 600;
        color: red;
      }

      .vline {
        display: inline-block;
        width: 1px;
        height: 12px;
        vertical-align: middle;
        background: #e0e0e0;
        margin: 0 10px;
      }
    }

    .comtel {
      margin-top: 10px;
      
      .tel {
        font-size: 20px;
        font-weight: bold;
        color: #0c8;
      }
    }

    .bottom {
      display: flex;
      margin-top: 10px;

      .btn {
        border-radius: 5px;
        font-size: 20px;
        padding: 10px 20px;
      }

      .call {
        background-color: blue;
        color: #fff;
      }

      .postjl {
        background-color: red;
        color: #fff;
        margin-left: 20px;
      }
    }
  }
}

.rdetail {
  text-align: left !important;

  .des {
    margin: 20px 0;
  }
}
.wel {
  margin-top: 3px;
  color: #999;

  span {
    display: inline-block;
    height: 26px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 26px;
    color: #999;
    border: 1px solid #f0f0f0;
    border-radius: 3px;
    text-align: center;
    margin-right: 5px;
    margin-bottom: 5px;
  }
}
.onrecruit {
  border-bottom: 1px solid #f1f1f1;
  padding: 20px 0;

  .onrecruit-title {
    font-size: 18px;
    font-weight: 600;
  }

  .onrecruit-salary {
    font-size: 14px;
    color: #999;

    .salary {
      color: red;
      font-size: 16px;
    }
  }
}
.onrecruit:last-child {
  border-bottom: none;
}

.comimgs {
  .comimgitem {
    width: 100%;

    img {
      width: 100%;
    }
  }
}
</style>

